<template>
    <div id="tab">
        <ul>
            <li :class="current === 0 ? 'active' : ''" @click="tabClick(0)">全部</li>
            <li :class="current === 1 ? 'active' : ''" @click="tabClick(1)">未付款</li>
            <li :class="current === 2 ? 'active' : ''" @click="tabClick(2)">已付款</li>
            <li :class="current === 3 ? 'active' : ''" @click="tabClick(3)">已发货</li>
            <li :class="current === 4 ? 'active' : ''" @click="tabClick(4)">已完成</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: '',
    data() { 
        return {
            current: 0
        }
    },
    created() {

    },
    methods:{
        tabClick(i) {
            this.current = i
            this.$emit('click', i)
        }
    },
}
</script>

<style scoped lang="scss">
    #tab {
        width: 100%;
        height: 60px;
        background-color: olivedrab;
        ul {
            display: flex;
            justify-content: space-between;
            height: 100%;
            li {
                line-height: 60px;
                text-align: center;
                flex-basis: 20%;
                color: #fff;
            }
            .active {
                color: blue;
            }
        }
    }
</style>